<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
/*
透明
Context对象可以通过调用translate()方法来移动Canvas画布中坐标原点的位置。translate()方法的区域：
void translate(x, y);  
用于将该Context对象所对应的Canvas的(0, 0)点移动到(x, y)点，并将其作为新的(0, 0)点。通过试验表明，translate()方法是通过把当前(0, 0)点设置为(-x, -y)点来实现这种移动的，并且改变后坐标原点将会影响由该Canvas对象生成的其它Context对象。但是，与Canvas中其它操纵图像的方法一样，translate()也只会影响移动后绘制的图形，对已经绘制到画布中的图形无效。
*/

var canvas =document.getElementById("myCanvas");    
var context =canvas.getContext("2d");    
     
context.fillRect(0, 0, 50, 50);    
     
context.translate(100, 100);    
context.fillStyle = "blue";    
context.fillRect(-100, -100, 50, 50);    
     
var context2 =canvas.getContext("2d");    
context2.fillStyle = "red";    
context2.fillRect(0, 0, 50, 50);    
</script>
</body>
</html>